<script setup>
import { onMounted, reactive } from "vue";
import { showToast } from 'vant';
import { useI18n } from "vue-i18n"
import Header from "@/components/Header.vue"
import { getBankDetail, updateBank } from "@/api"
const { t } = useI18n();
const state = reactive({
    bank: "",
    holder: "",//开户人
    account: '',
    address: '',
    usdtType: '',
    usdtAddress: '',
    loading: false,
    list: []
})
const sure = () => {
    if (state.bank == '' || state.holder == '' || state.account == '' || state.address == '' || state.usdtType == '') {
        showToast(t('Cannot be blank'));
        return
    }
    state.loading = true;
    updateBank({
        bank: state.bank,
        holder: state.holder,
        account: state.account,
        address: state.address,
        usdtType: state.usdtType,
        usdtAddress: state.usdtAddress
    }).then(() => {
        showToast(t('Successful operation'));
    }).catch(err => {
        showToast(err.msg);
    }).finally(() => {
        state.loading = false;
    })

}
onMounted(() => {
    init();
})

const init = () => {
    getBankDetail().then(([detail, list]) => {

        state.list = list;
        state.bank = detail.bank || list[0];
        state.holder = detail.holder || '';
        state.account = detail.account || '';
        state.address = detail.address || '';
        state.usdtType = detail.usdtType || 'TRC20';
        state.usdtAddress = detail.usdtAddress || '';

    }).catch(err => {
        console.log(err)
    })
}
</script>
<style scoped>
.text-font-size {
    font-size: 0.4rem;
}
</style>
<template>
    <Header :title="$t('My Payment Card')"></Header>
    <div class="px-2 py-2">
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Bank List') }}</span>
            </div>
            <select class="select select-bordered  max-w-xs min-h-1 max-h-5  text-font-size" v-model="state.bank">
                <option :value="item" v-for="item in state.list" :key="item" class="w-1/2 break-words">
                    {{ item }}</option>
            </select>
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Account number') }}</span>
            </div>
            <input type="text" v-model="state.account"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Account name') }}</span>
            </div>
            <input type="text" v-model="state.holder"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('Bankname Address') }}</span>
            </div>
            <input type="text" v-model="state.address"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">USDT</span>
            </div>
            <select class="select select-bordered  max-w-xs min-h-1 max-h-5  text-font-size" v-model="state.usdtType">
                <option value="TRC20">TRC20</option>
                <option value="ERC20">ERC20</option>
                <option value="BTC">BTC</option>
                <option value="ETH">ETH</option>
                <option value="USDT">USDT</option>
                <option value="USDC">USDC</option>
                <option value="TRON">TRON</option>
                <option value="XRP">XRP</option>
                <option value="ADA">ADA</option>
                <option value="DOGE">DOGE</option>
                <option value="MATIC">MATIC</option>
                <option value="BUSD">BUSD</option>
            </select>
        </label>
        <label class="form-control w-full max-w-xs">
            <div class="label p-0">
                <span class="label-text text-font-size">{{ $t('E-Wallet address') }}</span>
            </div>
            <input type="text" v-model="state.usdtAddress"
                class="input input-bordered w-full max-w-xs max-h-5 text-font-size" />
        </label>
        <div class="pt-4" @click="sure">
            <button class="btn btn-primary btn-xs w-full text-font-size" :disabled="state.loading">
                {{ $t('Information setting') }}
            </button>
        </div>
        <div class="p-2 italic">
            {{
        $t('Dear user, to protect your money,' +
            ' please do not enter your bank card password, our staff will not ask' +
            'you to enter your bank card password')
            }}
        </div>
    </div>
</template>
